
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3==={{ num }}==={{ obj.age }}=={{ arr }}
    <button @click="handle">按钮</button>
    <h1 v-if="flag">我是一个h1盒子</h1>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: '',
  setup () {
    /*
  ref:
  + 可以定义简单和复杂数据类型
  + setup中获取值需要.value
  + 模板上使用不需要.value
    */
    let num = ref(10)
    let obj = ref({
      age: 18
    })
    let arr = ref([1, 2, 3])
    let flag = ref(true)

    const handle = () => {
      console.log(flag);
      num.value += 10
      obj.value.age += 2
      arr.value.push(num.value)
      flag.value=!flag.value
    }
    return { num, handle, obj, arr, flag }
  }
}
</script>
<style lang='less'  scoped>
</style>